<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            position: relative;
        }
        .box{
            margin-left: 10px;
            border: 3px solid #00f;
            background-color: rgba(0,0,255,.2);
            display: inline-block;
            width: 65px;
            height: 65px;
            box-sizing: border-box;

        }
        .yellow{
            border:3px solid red;
            background-color: yellow;
        }
        .relative .yellow{
            position: relative;
            left:50px;
            top:40px;

        }
        .absolute .yellow{
            position: absolute;
            left: 50px;
            top:40px;
        }
        .long{
            height: 2000px;
        }
    </style>
</head>
<body>
    <div class="wrapper relative long">
        <p>控制和该买便黄色盒子打position属性，查看不同的效果</p>
        <p class="box"></p>
        <p class="box yellow"></p>
        <p class="box"></p>
        <!--
            relative:相对定位 不会破坏原有打页面结构
            absolute:绝对定位 当前元素浮动起来 left top right bottom
            fixed :牛皮癣定位
        -->
    </div>
</body>
</html>